<template>
  <basic-container v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content haruyuki-flex-center">
        <el-image
          style="width: 20px; height: 20px"
          src="/img/merchant-icon/aisle_mini.png"
          fit="fill"
        ></el-image>
        <span class="haruyuki-ml-6">通道配置</span>
      </div>
    </div>

    <div class="haruyuki-p-10">
      <div class="pay-aisle-search">
        <div class="pay-aisle-select">
          <span>默认使用通道：</span>
          <div class="aisle-change pay-aisle-content">
            <el-select
              size="small"
              class="haruyuki-width-100"
              @change="aisleChange"
              v-model="aisleData.aisleCode"
              clearable
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in aisleData.aisleVOS"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item.aisleCode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="pay-aisle-content">
          <el-button
            icon="el-icon-connection"
            type="primary"
            size="small"
            @click.stop="handleAisle(aisleData.aisleCode)"
            >更换通道</el-button
          >
        </div>
      </div>
      <div class="merchant-box haruyuki-mt-40">
        <div class="merchant-icon-func" v-for="item in aisleData.functionVOS" :key="item.id">
          <div class="pay-aisle-func">
            <el-image
              class="cursor"
              style="width: 70px; height: 70px"
              :src="item.aislePic"
              fit="fill"
              @click="moduleOperate(item)"
            ></el-image>
            <div class="haruyuki-flex-center pay-aisle-switch">
              <span class="haruyuki-mr-6">{{ item.aisleName }}支付</span>
              <el-switch
                size
                :active-value="1"
                :inactive-value="0"
                v-model="item.isOn"
                @change="secondsOpen(item)"
              >
              </el-switch>
            </div>
          </div>
        </div>
      </div>
    </div>
  </basic-container>
  
</template>

<script>
import {
  getQueryAisleDetailByRpi,
  onOrOffPayCompany,
  changeDefaultAisle
} from "@/api/rb-core/posinfo/pos_info_details";
export default {
    data() {
        return {
          rpiNo: "",
          aisleData: {},
          // payData: [
          //   {
          //     id: 1,
          //     name: "微信支付",
          //     image: "/img/pay-logo/wxpay-logo.png",
          //     compNo: 'C0000012',
          //     payKind: 2,
          //     show: true,
          //   },
          //   {
          //     id: 2,
          //     name: "支付宝支付",
          //     image: "/img/pay-logo/alipay-logo.png",
          //     compNo: 'C0000013',
          //     payKind: 1,
          //     show: true,
          //   },
          //   {
          //     id: 3,
          //     name: "POS刷卡支付",
          //     image: "/img/pay-logo/alipay-logo.png",
          //     show: false,
          //   },
          //   {
          //     id: 4,
          //     name: "云闪付支付",
          //     image: "/img/pay-logo/ysfpay-logo.png",
          //     compNo: 'C0000014',
          //     payKind: 3,
          //     show: true,
          //   }
          // ]
        }
    },
    created() {
      this.getAisleDetail();
    },
    methods: {
      /**
       * @func 跳转支付公司配置详情
       * @desc 通道配置详情
       * */
      moduleOperate(row) {
        if (row.payKind == 3) {
          this.$message.warning("敬请期待");
        } else {
          let data = {
            rpiNo: this.rpiNo,
            // aisleCode: this.aisleData.aisleCode,
            compNo: row.compNo,
            // payType: row.payKind+''
          }
          let params = encodeURIComponent(JSON.stringify(data))
          this.$router.push({
            name: "支付公司配置",
            query: {
              params: params
            },
          });
        }
        
      },
      /**
       * @func 通道配置详情
       * @desc 通道配置详情
       * */
      getAisleDetail() {
        this.rpiNo = this.$route.query.rpiNo;
        getQueryAisleDetailByRpi(this.rpiNo).then((res) => {
          this.aisleData = res.data.data;
        });
      },
      aisleChange(e) {
        console.log(e);
      },
      /**
       * @func 更换默认使用通道
       * @desc 更换默认使用通道 选中后点击按钮触发
       * */
      handleAisle(aisleCode) {
        if (aisleCode) {
          let params = {
            aisleCode: aisleCode,
            rpiNo: this.rpiNo
          }
          changeDefaultAisle(params).then((res) => {
            this.getAisleDetail();
            this.$message({
              type: "success",
              message: res.data.msg
            });
          });
        } else {
          this.$message.warning("请选择通道后再更换");
        }
      },
      /**
       * @func 通道配置状态开关
       * @desc 通道配置状态开关 0否 1是
       * @param {Object} row - 通道配置
       * */
      secondsOpen(row) {
        // rpiNo, aisleCode, payKind, isOn
        let params = {
          rpiNo: this.rpiNo,
          aisleCode: row.aisleCode,
          payKind: row.payKind,
          isOn: row.isOn
        }
        onOrOffPayCompany(params).then(
          () => {},
          (error) => {
            row.isOn = row.isOn == 1 ? 0 : 1;
            window.console.log(error);
          }
        );
      },
      /**
       * @func 返回页面
       * @desc 返回页面 goBack
       * */
      goBack() {
        this.$router.$avueRouter.closeTag();
        this.$router.back();
      },
    },
}
</script>

<style lang="scss" scoped>
.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  // justify-content: space-around;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-icon-func {
    width: 400px;
    // padding: 20px;
    text-align: center;
    .pay-aisle-func {
      margin: 20px;
      background-color: #F8F9FD;
      padding: 20px;
      border-radius: 10px;
      .pay-aisle-switch {
        margin-top: 4px;
      }
    }
    .cursor {
      cursor: pointer;
    }
  }
}

.pay-aisle-search {
  display: flex;
  align-items: center;
  margin: 0 20px;
  .pay-aisle-select {
    width: 25%;
    padding-right: 5px;
    .aisle-change {
      margin-left: 100px;
    }
    span {
      float: left;
      line-height: 32px;
      display: block;
      width: 100px;
      font-size: 14px;
      color: #606266;
    }
  }
}

.pay-aisle-content {
  line-height: 32px;
  position: relative;
  font-size: 14px;
}
</style>